<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', config('app.name', 'Laravel'))</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <style>
        :root {
            --primary-color: #2563eb;
            --primary-dark: #1d4ed8;
            --secondary-color: #64748b;
            --accent-color: #f59e0b;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-accent: #f1f5f9;
            --border-color: #e2e8f0;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --sidebar-width: 320px;
            --article-list-width: 350px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--bg-secondary);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        /* 顶部导航栏 */
        .top-navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .navbar-brand {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--text-primary);
            text-decoration: none;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            flex-shrink: 0;
        }

        .top-navbar .navbar-nav {
            display: flex;
            flex-direction: row !important;
            align-items: center;
            gap: 0.5rem;
            flex: 1;
            justify-content: center;
            margin: 0 2rem;
        }

        .top-navbar .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }

        .top-navbar .nav-link:hover {
            color: var(--primary-color);
            background: var(--bg-accent);
        }

        .top-navbar .nav-link.active {
            color: var(--primary-color);
            background: var(--bg-accent);
            font-weight: 600;
        }

        .top-navbar .search-form {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .top-navbar .form-control {
            border: 2px solid var(--border-color);
            border-radius: 1.5rem;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            width: 250px;
            transition: all 0.3s ease;
        }

        .top-navbar .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .top-navbar .btn {
            border-radius: 1.5rem;
            padding: 0.5rem 1rem;
            margin-left: 0.5rem;
            background: var(--primary-color);
            border: none;
            color: white;
        }

        /* 主要布局容器 */
        .main-container {
            display: flex;
            margin-top: 60px;
            height: calc(100vh - 60px);
        }

        /* 左侧分类导航 */
        .category-sidebar {
            width: var(--sidebar-width);
            background: var(--bg-primary);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            box-shadow: var(--shadow-sm);
        }

        .category-sidebar .sidebar-header {
            padding: 1.5rem 1rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-accent);
        }

        .category-sidebar .sidebar-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* 手风琴样式 */
        .accordion-category {
            border: none;
        }

        .accordion-category .accordion-item {
            border: none;
            border-bottom: 1px solid var(--border-color);
        }

        .accordion-category .accordion-header {
            margin-bottom: 0;
        }

        .accordion-category .accordion-button {
            background: var(--bg-primary);
            border: none;
            padding: 1rem;
            font-weight: 500;
            color: var(--text-primary);
            box-shadow: none;
            transition: all 0.3s ease;
        }

        .accordion-category .accordion-button:not(.collapsed) {
            background: var(--bg-accent);
            color: var(--primary-color);
            box-shadow: none;
        }

        .accordion-category .accordion-button:hover {
            background: var(--bg-accent);
        }

        .accordion-category .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .accordion-category .accordion-body {
            padding: 0;
        }

        /* 中间文章列表 */
        .article-list {
            width: var(--article-list-width);
            background: var(--bg-primary);
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            display: none;
        }

        .article-list.show {
            display: block;
        }

        .article-list .list-header {
            padding: 1.5rem 1rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-accent);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .article-list .list-header h4 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .article-list .list-header .article-count {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .article-item {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .article-item:hover {
            background: var(--bg-accent);
        }

        .article-item.active {
            background: var(--bg-accent);
            border-left: 3px solid var(--primary-color);
        }

        .article-item .article-title {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .article-item .article-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .article-item .article-excerpt {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 右侧文章内容 */
        .article-content {
            flex: 1;
            background: var(--bg-primary);
            overflow-y: auto;
            padding: 2rem;
        }

        .article-content .welcome-message {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-muted);
        }

        .article-content .welcome-message i {
            font-size: 4rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .article-content .article-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .article-content .article-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        .article-content .article-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.9rem;
            color: var(--text-muted);
            flex-wrap: wrap;
        }

        .article-content .article-meta .meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .article-content .article-body {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-primary);
        }

        .article-content .article-body h1,
        .article-content .article-body h2,
        .article-content .article-body h3,
        .article-content .article-body h4,
        .article-content .article-body h5,
        .article-content .article-body h6 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .article-content .article-body p {
            margin-bottom: 1.5rem;
        }

        .article-content .article-body img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            box-shadow: var(--shadow-md);
            margin: 1.5rem 0;
        }

        /* 标签样式 */
        .tag {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin: 0.125rem 0.25rem 0.125rem 0;
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            border: 1px solid rgba(37, 99, 235, 0.2);
            border-radius: 1rem;
            text-decoration: none;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .tag:hover {
            background: var(--primary-color);
            color: white;
            text-decoration: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }

            .category-sidebar {
                width: 100%;
                height: auto;
                max-height: 40vh;
            }

            .article-list {
                width: 100%;
                height: auto;
                max-height: 30vh;
            }

            .article-content {
                padding: 1rem;
            }

            .article-content .article-title {
                font-size: 1.5rem;
            }
        }

        /* 滚动条样式 */
        .category-sidebar::-webkit-scrollbar,
        .article-list::-webkit-scrollbar,
        .article-content::-webkit-scrollbar {
            width: 6px;
        }

        .category-sidebar::-webkit-scrollbar-track,
        .article-list::-webkit-scrollbar-track,
        .article-content::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        .category-sidebar::-webkit-scrollbar-thumb,
        .article-list::-webkit-scrollbar-thumb,
        .article-content::-webkit-scrollbar-thumb {
            background: var(--text-muted);
            border-radius: 3px;
        }

        .category-sidebar::-webkit-scrollbar-thumb:hover,
        .article-list::-webkit-scrollbar-thumb:hover,
        .article-content::-webkit-scrollbar-thumb:hover {
            background: var(--text-secondary);
        }

        /* 加载动画 */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            color: var(--text-muted);
        }

        .loading .spinner-border {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.5rem;
        }
    </style>
    
    @stack('styles')
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <a class="navbar-brand" href="{{ route('home') }}">
            <i class="bi bi-journal-text me-2"></i>{{ config('app.name', 'Laravel CMS') }}
        </a>
        
        <!-- 导航菜单 -->
        <div class="navbar-nav">
            <a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">
                <i class="bi bi-house-door me-1"></i>首页
            </a>
            <a class="nav-link {{ request()->routeIs('categories.*') ? 'active' : '' }}" href="{{ route('categories.index') }}">
                <i class="bi bi-folder me-1"></i>分类
            </a>
            <a class="nav-link {{ request()->routeIs('tags.*') ? 'active' : '' }}" href="{{ route('tags.index') }}">
                <i class="bi bi-tags me-1"></i>标签
            </a>
            <a class="nav-link {{ request()->routeIs('pages.*') ? 'active' : '' }}" href="{{ route('pages.index') }}">
                <i class="bi bi-file-text me-1"></i>页面
            </a>
        </div>
        
        <!-- 搜索表单 -->
        <form class="search-form" method="GET" action="{{ route('posts.index') }}">
            <div class="d-flex">
                <input class="form-control" type="search" name="search" 
                       placeholder="搜索文章..." value="{{ request('search') }}" aria-label="搜索文章">
                <button class="btn btn-primary" type="submit">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-container">
        <!-- 左侧分类导航 -->
        <div class="category-sidebar">
            <div class="sidebar-header">
                <h3><i class="bi bi-folder me-2"></i>文章分类</h3>
            </div>
            
            <div class="accordion accordion-category" id="categoryAccordion">
                @foreach($categories as $category)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ $category->id }}">
                        <button class="accordion-button collapsed" type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#collapse{{ $category->id }}" 
                                aria-expanded="false" 
                                aria-controls="collapse{{ $category->id }}"
                                data-category-id="{{ $category->id }}"
                                data-category-name="{{ $category->name }}">
                            <i class="bi bi-folder me-2"></i>
                            {{ $category->name }}
                            <span class="badge bg-primary ms-auto me-2">{{ $category->posts_count }}</span>
                        </button>
                    </h2>
                    <div id="collapse{{ $category->id }}" 
                         class="accordion-collapse collapse" 
                         aria-labelledby="heading{{ $category->id }}" 
                         data-bs-parent="#categoryAccordion">
                        <div class="accordion-body">
                            <div class="loading" id="loading{{ $category->id }}">
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                                加载中...
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- 中间文章列表 -->
        <div class="article-list" id="articleList">
            <div class="list-header">
                <h4 id="listTitle">选择分类查看文章</h4>
                <div class="article-count" id="articleCount"></div>
            </div>
            <div id="articleItems">
                <div class="welcome-message">
                    <i class="bi bi-arrow-left"></i>
                    <p>请从左侧选择一个分类来查看文章列表</p>
                </div>
            </div>
        </div>

        <!-- 右侧文章内容 -->
        <div class="article-content" id="articleContent">
            <div class="welcome-message">
                <i class="bi bi-file-text"></i>
                <h3>欢迎来到文章阅读区</h3>
                <p>选择左侧分类和文章来开始阅读</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const categoryAccordion = document.getElementById('categoryAccordion');
            const articleList = document.getElementById('articleList');
            const articleContent = document.getElementById('articleContent');
            const listTitle = document.getElementById('listTitle');
            const articleCount = document.getElementById('articleCount');
            const articleItems = document.getElementById('articleItems');

            // 分类展开事件
            categoryAccordion.addEventListener('shown.bs.collapse', function(e) {
                const button = e.target.previousElementSibling.querySelector('.accordion-button');
                const categoryId = button.dataset.categoryId;
                const categoryName = button.dataset.categoryName;
                
                loadCategoryPosts(categoryId, categoryName, e.target.querySelector('.accordion-body'));
            });

            // 加载分类下的文章
            function loadCategoryPosts(categoryId, categoryName, container) {
                const loadingElement = container.querySelector('.loading');
                
                fetch(`/api/categories/${categoryId}/posts`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showArticleList(data.posts, categoryName);
                            loadingElement.style.display = 'none';
                        } else {
                            container.innerHTML = '<div class="text-center p-3 text-muted">加载失败</div>';
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        container.innerHTML = '<div class="text-center p-3 text-muted">加载失败</div>';
                    });
            }

            // 显示文章列表
            function showArticleList(posts, categoryName) {
                articleList.classList.add('show');
                listTitle.textContent = categoryName;
                articleCount.textContent = `共 ${posts.length} 篇文章`;
                
                if (posts.length === 0) {
                    articleItems.innerHTML = `
                        <div class="welcome-message">
                            <i class="bi bi-inbox"></i>
                            <p>该分类下暂无文章</p>
                        </div>
                    `;
                    return;
                }

                let html = '';
                posts.forEach(post => {
                    html += `
                        <div class="article-item" data-post-id="${post.id}" data-post-slug="${post.slug}">
                            <div class="article-title">${post.title}</div>
                            <div class="article-meta">
                                <span><i class="bi bi-calendar"></i> ${formatDate(post.published_at)}</span>
                                <span><i class="bi bi-eye"></i> ${post.views || 0}</span>
                            </div>
                            ${post.excerpt ? `<div class="article-excerpt">${post.excerpt}</div>` : ''}
                        </div>
                    `;
                });
                
                articleItems.innerHTML = html;

                // 添加文章点击事件
                articleItems.querySelectorAll('.article-item').forEach(item => {
                    item.addEventListener('click', function() {
                        // 移除其他活动状态
                        articleItems.querySelectorAll('.article-item').forEach(i => i.classList.remove('active'));
                        // 添加当前活动状态
                        this.classList.add('active');
                        
                        const postSlug = this.dataset.postSlug;
                        loadArticleContent(postSlug);
                    });
                });
            }

            // 加载文章内容
            function loadArticleContent(slug) {
                articleContent.innerHTML = `
                    <div class="loading">
                        <div class="spinner-border" role="status"></div>
                        加载文章内容中...
                    </div>
                `;

                fetch(`/api/posts/${slug}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showArticleContent(data.post);
                        } else {
                            articleContent.innerHTML = `
                                <div class="welcome-message">
                                    <i class="bi bi-exclamation-triangle"></i>
                                    <h3>加载失败</h3>
                                    <p>无法加载文章内容，请稍后重试</p>
                                </div>
                            `;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        articleContent.innerHTML = `
                            <div class="welcome-message">
                                <i class="bi bi-exclamation-triangle"></i>
                                <h3>加载失败</h3>
                                <p>无法加载文章内容，请稍后重试</p>
                            </div>
                        `;
                    });
            }

            // 显示文章内容
            function showArticleContent(post) {
                let tagsHtml = '';
                if (post.tags && post.tags.length > 0) {
                    tagsHtml = post.tags.map(tag => 
                        `<a href="/tags/${tag.slug}" class="tag">${tag.name}</a>`
                    ).join('');
                }

                articleContent.innerHTML = `
                    <div class="article-header">
                        <h1 class="article-title">${post.title}</h1>
                        <div class="article-meta">
                            <div class="meta-item">
                                <i class="bi bi-calendar"></i>
                                <span>${formatDate(post.published_at)}</span>
                            </div>
                            <div class="meta-item">
                                <i class="bi bi-person"></i>
                                <span>${post.user ? post.user.name : '匿名'}</span>
                            </div>
                            <div class="meta-item">
                                <i class="bi bi-folder"></i>
                                <span>${post.category ? post.category.name : '未分类'}</span>
                            </div>
                            <div class="meta-item">
                                <i class="bi bi-eye"></i>
                                <span>${post.views || 0} 次阅读</span>
                            </div>
                        </div>
                        ${tagsHtml ? `<div class="mt-2">${tagsHtml}</div>` : ''}
                    </div>
                    <div class="article-body">
                        ${post.content}
                    </div>
                `;
            }

            // 格式化日期
            function formatDate(dateString) {
                const date = new Date(dateString);
                return date.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
            }
        });
    </script>
    
    @stack('scripts')
</body>
</html>